<template>
  <el-dialog
      v-model="showDialog"
      :title="title"
      :draggable="true"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      @open="openDialog"
      @opened="openedDialog"
      @close="closeDialog(detailItemRef)"
      @closed="closedDialog"
  >
    <el-form
        :model="detailItem"
        :rules="detailItemRules"
        ref="detailItemRef"
        label-width="120px">
      <el-form-item label="明细key" prop="detailKey">
        <el-input v-model="detailItem.detailKey"></el-input>
      </el-form-item>
      <el-form-item label="明细文本" prop="detailText">
        <el-input v-model="detailItem.detailText"></el-input>
      </el-form-item>
      <el-form-item label="明细值" prop="detailValue">
        <el-input v-model="detailItem.detailValue"></el-input>
      </el-form-item>
      <el-form-item label="说明" prop="introduce">
        <el-input v-model="detailItem.introduce" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="seq">
        <el-input v-model="detailItem.seq" type="number"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="confirm(detailItemRef)" :loading="confirmLoading">保存</el-button>
      <el-button type="danger" @click="closeDialog(detailItemRef)">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {DIALOG_ADD, DIALOG_EDIT, DIALOG_VIEW} from "@/constants/common-constant.ts";
import {reactive, ref, watch} from "vue";
import type {FormInstance, FormRules} from "element-plus";
import {elMessageTip, warningMessageTip} from "@/utils/tip-utils.ts";
import {saveDetailDictReq} from "@/api/admin/dict.ts";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config.ts";

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  dialogType: {
    type: String,
    default: DIALOG_VIEW
  },
  dialogParam: {
    type: Object,
    default: () => {
    }
  }
})
const showDialog = ref(props.showDialog)
watch(() => props.showDialog, (val: boolean) => {
  showDialog.value = val
})
const emits = defineEmits(['openDialog', 'openedDialog', 'closeDialog', 'closedDialog'])

interface DetailItem {
  id: string;
  detailKey: string;
  detailText: string;
  detailValue: string;
  introduce: string;
  seq: string;
}

const detailItem = reactive<DetailItem>({
  id: '',
  detailKey: '',
  detailText: '',
  detailValue: '',
  introduce: '',
  seq: ''
})

const detailItemRef = ref<FormInstance>()

const detailItemRules = reactive<FormRules<DetailItem>>({
  detailKey: [
    {required: true, message: '请输入明细key', trigger: 'blur'}
  ],
  detailText: [
    {required: true, message: '请输入明细文本', trigger: 'blur'}
  ],
  detailValue: [
    {required: true, message: '请输入明细值', trigger: 'blur'}
  ],
  seq: [
    {required: true, message: '请输入排序', trigger: 'blur'},
  ]
})

const confirmLoading = ref<boolean>(false)

const openDialog = () => {

}

const initFormData = () => {
  const dialogParam = props.dialogParam
  detailItem.detailKey = dialogParam.detailKey
  detailItem.detailText = dialogParam.detailText
  detailItem.detailValue = dialogParam.detailValue
  detailItem.introduce = dialogParam.introduce
  detailItem.seq = dialogParam.seq
}

const openedDialog = () => {
  const dialogType = props.dialogType

  if (dialogType === DIALOG_EDIT) {
    initFormData()
  }
}

const closeDialog = (formEl: FormInstance | undefined) => {
  reset(formEl)
  emits('closeDialog', false)
}

const closedDialog = () => {
  emits('closedDialog', false)
}

const confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, filed) => {
    if (!valid){
      warningMessageTip("请填写完整信息")
    } else {
      commonConfirm(formEl)
    }
  })
}

const commonConfirm = async (formEl: FormInstance | undefined) => {
  confirmLoading.value = true
  const params = {
    id: props.dialogParam.id,
    dictionaryKey: props.dialogParam.dictionaryKey,
    detailKey: detailItem.detailKey,
    detailText: detailItem.detailText,
    detailValue: detailItem.detailValue,
    introduce: detailItem.introduce,
    seq: detailItem.seq
  }

  const res: any = await saveDetailDictReq(params)
  confirmLoading.value = false
  elMessageTip(res.tipType, res.message)
  if (res.code === RESPONSE_CODE_SUCCESS){
    closeDialog(formEl)
  }
}

const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped>

</style>